<template>
  <div>
    <!-- status为1，省市区三个非必选；为2，三个全选中 -->
    <el-cascader
    v-if="status === 1"
    v-model="areaVal"
    :options="areaOptions"
    :props="areaProps"
    style="width: 100%;"
    clearable
    @change="areaChange"
  />
  <el-cascader
    v-if="status === 2"
    v-model="areaVal"
    :options="areaOptions"
    :props="areaProps2"
    style="width: 100%;"
    clearable
    @change="areaChange"
  />
  </div>
</template>

<script>
import { area } from '@/api/common'
import { mapGetters } from 'vuex'
export default {
  props: {
    status: {
      default: 1
    }
  },
  data() {
    return {
      areaVal: [],
      areaProps: {
        checkStrictly: true,
        children: 'children',
        value: 'id',
        label: 'name'
      },
      areaProps2: {
        children: 'children',
        value: 'id',
        label: 'name'
      }
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    // 映射为 `this.$store.getters.areaOptions`
    ...mapGetters(['areaOptions'])
  },
  created() {
    // 判断vuex里是否存有省市区，没有的话就调接口
    if (!this.areaOptions.length) {
      area().then(res => {
        this.$store.commit('SET_AREA', res)
      })
    }
  },
  methods: {
    clearArea() {
      this.areaVal = []
    },
    // 将id传递给父组件
    areaChange(val) {
      this.$emit('selectArea', {
        provinceId: val[0],
        cityId: val[1],
        districtId: val[2],
        areaVal: val
      })
      console.log(val)
    }
  }
}
</script>

<style lang="scss">
</style>
